<template>
	<view class="order-create">
		<!-- 顶部进度条 -->
		<view class="progress-bar">
			<view class="progress-step active">
				<text class="step-num">1</text>
				<text class="step-text">选择寄存点</text>
			</view>
			<view class="progress-line active"></view>
			<view class="progress-step active">
				<text class="step-num">2</text>
				<text class="step-text">选择箱型</text>
			</view>
			<view class="progress-line"></view>
			<view class="progress-step">
				<text class="step-num">3</text>
				<text class="step-text">确认订单</text>
			</view>
		</view>

		<!-- 寄存点信息 -->
		<view class="depot-info">
			<view class="depot-header">
				<text class="depot-name">市中心火车站寄存点</text>
				<text class="change-btn" @click="handleChangeDepot">更换</text>
			</view>
			<view class="depot-address">
				<uni-icons type="location" size="14" color="#999"></uni-icons>
				<text>火车站东广场B1层</text>
			</view>
		</view>

		<!-- 箱型选择 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">选择箱型</text>
			</view>

			<view class="locker-types">
				<view class="locker-item" v-for="(item, index) in lockerTypes" :key="index"
					:class="{active: activeLocker === item.type}" @click="activeLocker = item.type">
					<view class="locker-icon">
						<image :src="item.icon" mode="aspectFit"></image>
					</view>
					<text class="locker-name">{{item.name}}</text>
					<text class="locker-price">¥{{item.price}}/小时起</text>
					<text class="locker-desc">{{item.desc}}</text>
				</view>
			</view>
		</view>

		<!-- 时间选择 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">选择时间</text>
			</view>

			<view class="time-picker">
				<view class="time-item">
					<text class="time-label">开始时间</text>
					<picker mode="date" :value="startDate" @change="changeStartDate">
						<view class="time-value">{{startDate}}</view>
					</picker>
					<picker mode="time" :value="startTime" @change="changeStartTime">
						<view class="time-value">{{startTime}}</view>
					</picker>
				</view>

				<view class="time-item">
					<text class="time-label">结束时间</text>
					<picker mode="date" :value="endDate" @change="changeEndDate">
						<view class="time-value">{{endDate}}</view>
					</picker>
					<picker mode="time" :value="endTime" @change="changeEndTime">
						<view class="time-value">{{endTime}}</view>
					</picker>
				</view>
			</view>
		</view>

		<!-- 保险服务 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">保险服务</text>
			</view>

			<view class="insurance">
				<view class="insurance-left">
					<text class="insurance-name">行李丢失保障</text>
					<text class="insurance-desc">最高赔付5000元</text>
				</view>
				<view class="insurance-right">
					<text class="insurance-price">¥5</text>
					<switch :checked="insuranceEnabled" @change="toggleInsurance" color="#FF7F00" />
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="action-bar">
			<view class="price-info">
				<text class="label">预估费用:</text>
				<text class="price">¥{{estimatedPrice}}</text>
			</view>
			<view class="action-btn" @click="handleNextStep">下一步</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeLocker: 'medium',
				lockerTypes: [{
						type: 'small',
						name: '小箱型',
						icon: '/static/small-locker.png',
						price: 6,
						desc: '20寸以下行李箱'
					},
					{
						type: 'medium',
						name: '中箱型',
						icon: '/static/medium-locker.png',
						price: 8,
						desc: '24寸行李箱'
					},
					{
						type: 'large',
						name: '大箱型',
						icon: '/static/large-locker.png',
						price: 10,
						desc: '28寸行李箱'
					}
				],
				startDate: this.getToday(),
				startTime: '10:00',
				endDate: this.getToday(),
				endTime: '18:00',
				insuranceEnabled: true,
				hours: 8
			}
		},
		computed: {
			estimatedPrice() {
				const locker = this.lockerTypes.find(item => item.type === this.activeLocker);
				let price = locker.price * this.hours;
				if (this.insuranceEnabled) price += 5;
				return price.toFixed(2);
			}
		},
		methods: {
			getToday() {
				const date = new Date();
				return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
			},
			async loadAvailableCells() {
				uni.showLoading({
					title: '加载中...'
				})

				try {
					const depotObj = uniCloud.importObject('depot')
					const res = await depotObj.getAvailableCells(
						this.orderData.depot_id,
						this.orderData.size_type
					)

					if (res.code === 0) {
						this.availableCells = res.data
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				} catch (e) {
					uni.showToast({
						title: '获取可用格子失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},

			// 选择格子
			selectCell(cell) {
				this.selectedCell = cell
				this.orderData.cell_id = cell._id
			},

			// 提交订单
			async submitOrder() {
				// 验证数据
				if (!this.orderData.cell_id) {
					uni.showToast({
						title: '请选择寄存格子',
						icon: 'none'
					})
					return
				}

				if (!this.orderData.start_time || !this.orderData.end_time) {
					uni.showToast({
						title: '请选择寄存时间',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '创建订单中...'
				})

				try {
					const orderObj = uniCloud.importObject('order')
					const res = await orderObj.createOrder(this.orderData)

					if (res.code === 0) {
						uni.navigateTo({
							url: `/pages/order/pay?id=${res.data.order_id}`
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				} catch (e) {
					uni.showToast({
						title: '创建订单失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},
			changeStartDate(e) {
				this.startDate = e.detail.value;
			},
			changeStartTime(e) {
				this.startTime = e.detail.value;
			},
			changeEndDate(e) {
				this.endDate = e.detail.value;
			},
			changeEndTime(e) {
				this.endTime = e.detail.value;
			},
			toggleInsurance(e) {
				this.insuranceEnabled = e.detail.value;
			},
			handleChangeDepot() {
				uni.navigateBack();
			},
			handleNextStep() {
				uni.navigateTo({
					url: '/pages/order/confirm'
				})
			}
		}
	}
</script>

<style lang="scss">
	$primary-color: #FF7F00;

	.order-create {
		padding-bottom: 60px;
		background: #f8f8f8;
	}

	.progress-bar {
		display: flex;
		align-items: center;
		padding: 20px 15px;
		background: #fff;

		.progress-step {
			display: flex;
			flex-direction: column;
			align-items: center;

			.step-num {
				width: 24px;
				height: 24px;
				border-radius: 50%;
				background: #ddd;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
			}

			.step-text {
				font-size: 12px;
				margin-top: 5px;
				color: #999;
			}

			&.active {
				.step-num {
					background: $primary-color;
				}

				.step-text {
					color: $primary-color;
					font-weight: bold;
				}
			}
		}

		.progress-line {
			flex: 1;
			height: 2px;
			background: #ddd;
			margin: 0 5px;

			&.active {
				background: $primary-color;
			}
		}
	}

	.depot-info {
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;

		.depot-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}

		.depot-name {
			font-size: 16px;
			font-weight: bold;
		}

		.change-btn {
			color: $primary-color;
			font-size: 14px;
		}

		.depot-address {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #666;
		}
	}

	.section {
		background: #fff;
		margin-bottom: 10px;
		padding: 15px;

		.section-header {
			margin-bottom: 15px;
		}

		.section-title {
			font-size: 16px;
			font-weight: bold;
		}
	}

	.locker-types {
		display: flex;
		justify-content: space-between;

		.locker-item {
			width: 30%;
			border: 1px solid #eee;
			border-radius: 8px;
			padding: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;

			&.active {
				border-color: $primary-color;
				background-color: #FFF5EB;
			}
		}

		.locker-icon {
			width: 60px;
			height: 60px;
			margin-bottom: 8px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.locker-name {
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 5px;
		}

		.locker-price {
			color: $primary-color;
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 5px;
		}

		.locker-desc {
			font-size: 12px;
			color: #999;
			text-align: center;
		}
	}

	.time-picker {
		.time-item {
			display: flex;
			align-items: center;
			margin-bottom: 15px;

			.time-label {
				width: 80px;
				font-size: 15px;
				color: #333;
			}

			.time-value {
				flex: 1;
				background: #f5f5f5;
				border-radius: 6px;
				padding: 8px 12px;
				margin-right: 10px;
				font-size: 14px;
			}
		}
	}

	.insurance {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.insurance-name {
			font-size: 15px;
			display: block;
			margin-bottom: 5px;
		}

		.insurance-desc {
			font-size: 13px;
			color: #999;
		}

		.insurance-price {
			color: $primary-color;
			margin-right: 15px;
			font-size: 16px;
		}
	}

	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 15px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

		.price-info {
			flex: 1;

			.label {
				font-size: 14px;
				color: #666;
				margin-right: 5px;
			}

			.price {
				color: $primary-color;
				font-size: 18px;
				font-weight: bold;
			}
		}

		.action-btn {
			width: 140px;
			height: 44px;
			background: $primary-color;
			border-radius: 22px;
			color: #fff;
			font-size: 16px;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>